<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LinearAlgebra</title>
	<link rel="stylesheet" type="text/css" href="/assets/style.css">
	<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
	<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
	<link rel="shortcut icon" href="/favicon/favicon.ico" />
	<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
	<link rel="manifest" href="/favicon/site.webmanifest" />
	<link rel="stylesheet" href="./assets/loginstyle.css" />
	<link rel="stylesheet" href="./assets/iconfont/iconfont.css" />
	<!-- <link rel="stylesheet" href="./assets/mathml.css" /> -->
	<!-- <link rel="stylesheet" type="text/css" href="katex.min.css"> -->
	<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css" integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous"> -->
</head>

<body>
	<div class="grid-container">
		<header class="header">
			<h1 class="dspInlineblock">LinearAlgebra</h1>
		</header>
		<login class="login">
			<button type="button" id="loginSignUp" class="login" onclick="showSignIUModal()">login/SignUp</button>
			<div class="userIconForm dspInline" id="userIconForm">
				<span class="font-12">please login</span>
			</div>
		</login>
		<hrl class="hrl"></hrl>
		<directory id="directory" class="directory">
			<ul>
				<li>
					<div class="item">
						<span class="arrow">▶</span>
						<span class="title">第一章 基础概念</span>
					</div>
					<ul class="sub-items">
						<li>1.1 HTML简介</li>
						<li>1.2 CSS核心属性</li>
					</ul>
				</li>
				<li>
					<div class="item">
						<span class="arrow">▶</span>
						<span class="title">第二章 高级技巧</span>
					</div>
					<ul class="sub-items">
						<li>2.1 响应式布局</li>
						<li>2.2 动画实现</li>
						<!-- 更多子项... -->
					</ul>
				</li>
				<!-- 更多主项... -->
			</ul>
		</directory>

		<menu id="menu" class="menu">
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">generate matrix</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" onclick="genIN()">IN</button>
					<button type="button" class="dropdownButton" onclick="genRandom()">Random</button>
					<button type="button" class="dropdownButton" onclick="genRandom(genInt=true)">RandomInt</button>
					<button type="button" class="dropdownButton" onclick="genRandomLT()">RandomLeonTief</button>
					<button type="button" class="dropdownButton" onclick="genDiagonal(genN, 'λ')">Lambda</button>
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">clearResult</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" onclick="clearSelected()">clear selected</button>
					<button type="button" class="dropdownButton" onclick="clearAll()">clear all</button>
				</div>
			</div>
			<button type="button" class="normalButton" onclick="parseInput()">parseInput</button>
			<button type="button" class="normalButton" data-func="echlon" onclick="echlon()">echlon</button>
			<button type="button" class="normalButton" data-func="transpose" onclick="transpose()">transpose</button>
			<button type="button" class="normalButton" data-func="inverse" onclick="inverse()">inverse</button>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">M1/M2 operate</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" onclick="M1AddM2()">M1 + M2</button>
					<button type="button" class="dropdownButton" onclick="M1SubM2()">M1 - M2</button>
					<button type="button" class="dropdownButton" onclick="M1MulM2()">M1 * M2</button>
					<button type="button" class="dropdownButton" onclick="M2MulM1()">M2 * M1</button>
					<button type="button" class="dropdownButton" onclick="M1JoinM2()">M1 ~ M2</button>
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">chainMultiply</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" onclick="M1M2M3Mul()">M1*M2*M3</button>
					<button type="button" class="dropdownButton" onclick="M1Power()">M1.power</button>
					<input type="text" class=" tabbed width50 centered" id="pow" placeholder="power to:">
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">Ax=b</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" data-func="Axb_Inv"
						onclick="Axb_Inv()">A<sup>-1</sup>x=b</button>
					<button type="button" class="dropdownButton" data-func="Axb_LUP" onclick="Axb_LUP()">LUP</button>
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">Factorization</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" data-func="LUFactorization"
						onclick="LUFactorization() ">LUFactorization</button>
					<button type="button" class="dropdownButton" data-func="QRFactorization"
						onclick="QRFactorization() ">QRFactorization</button>
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">Determinant</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" data-func="DetRec" onclick="DetRec()">recursive</button>
					<button type="button" class="dropdownButton" data-func="DetByLU" onclick="DetByLU()">LU
						calculation</button>
					<button type="button" class="dropdownButton" data-func="adjugate" onclick="adjugate()">adjugate
						mat</button>
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">Eigenspace</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" data-func="findEigenvalue"
						onclick="findEigenvalue()">eigenvalues</button>
					<button type="button" class="dropdownButton" data-func="SVD" onclick="SVD()">SVD</button>
				</div>
			</div>
			<div class="dropdown normalButton">
				<button type="button" class="normalButton">Product</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" data-func="splitIntoVectors"
						onclick="splitIntoVectors()">splitIntoVectors</button>
					<button type="button" class="dropdownButton" data-func="innerProduct"
						onclick="innerProduct()">innerProduct</button>
					<button type="button" class="dropdownButton" data-func="selfInnerProduct"
						onclick="selfInnerProduct()">selfInnerProduct</button>
					<button type="button" class="dropdownButton" data-func="vectorLength"
						onclick="vectorLength()">vectorLength</button>
					<button type="button" class="dropdownButton" data-func="matNormalize"
						onclick="matNormalize()">normalize</button>
					<button type="button" class="dropdownButton" data-func="V1ProjOnV2" onclick="V1ProjOnV2()">V1ProjOnV2</button>
					<button type="button" class="dropdownButton" data-func="V2ProjOnV1" onclick="V2ProjOnV1()">V2ProjOnV1</button>
					<button type="button" class="dropdownButton" data-func="orthogonalBasis"
						onclick="orthogonalBasis()">orthogonalBasis</button>
					<button type="button" class="dropdownButton" data-func="orthonormalBasis"
						onclick="orthonormalBasis()">orthonormalBasis</button>
				</div>
			</div>
			<div class="dropdown normalButton" id="idDraw">
				<button type="button" class="normalButton">Draw</button>
				<div class="dropdown-content zindex100 dspNone">
					<button type="button" class="dropdownButton" data-func="drawVectors"
						onclick="drawVectors()">drawVectors</button>
					<button type="button" class="dropdownButton" data-func="drawShape" onclick="drawShape()">drawShape</button>
					<button type="button" class="dropdownButton" data-func="vectorTransform2d"
						onclick="vectorTransform2d()">vectorTransform2d</button>
				</div>
			</div>
		</menu>
		<main class="main">
			<inputDiv id="inputDiv" class="inputDiv">
				<div class="dspNone">
					<textarea class="dspInlineblock" name="input box" id="input0" cols="20" rows="8"
						placeholder="data for matrix0"></textarea>
				</div>
				<div class="dspInlineblock">
					<textarea class="dspInlineblock" name="input box" id="input1" cols="20" rows="8"
						placeholder="data for matrix1"></textarea>
					<label for="selFile1" class="dspNone">ocr</label>
					<input type="file" class="floatInput font-12 dspNone" id="selFile1" name="file1"
						accept="image/png, image/jpeg" />
					<!-- <button type="button" class="floatDel" onclick="document.getElementById('selFile1').click()">ocr</button> -->
					<button type="button" class="floatDel dspNone" onclick=ocrTesseract(this)>ocr</button>
					<img src="pic.png" alt="ocrtxt" height="115px" class="dspNone" id="ocrImg1">
				</div>
				<div class="dspInlineblock">
					<textarea class="dspInlineblock" name="input box" id="input2" cols="20" rows="8"
						placeholder="data for matrix2"></textarea>
					<label for="selFile2" class="dspNone">ocr</label>
					<input type="file" class="floatInput font-12 dspNone" id="selFile2" name="file2"
						accept="image/png, image/jpeg" />
					<button type="button" class="floatDel dspNone" onclick=ocrTesseract(this)>ocr</button>
					<img src="pic.png" alt="ocrtxt" height="115px" class="dspNone" id="ocrImg2">
				</div>
				<div class="dspInlineblock dspNone">
					<textarea class="dspInlineblock" name="input box" id="input3" cols="20" rows="8"
						placeholder="data for matrix3"></textarea>
					<label for="selFile3" class="dspNone">ocr</label>
					<input type="file" class="floatInput font-12 dspNone" id="selFile3" name="file3"
						accept="image/png, image/jpeg" />
					<button type="button" class="floatDel dspNone" onclick=ocrTesseract(this)>ocr</button>
					<img src="pic.png" alt="ocrtxt" height="115px" class="dspNone" id="ocrImg3">
				</div>
				<div id="copyTemplate" class="bgDiv dspNone">
					<textarea class="dspInlineblock" name="input box" cols="20" rows="8" placeholder="copied data"></textarea>
					<label class="floatLabel">copied</label>
					<button type="button" class="floatDel"
						onclick="this.parentNode.parentNode.removeChild(this.parentNode)">del</label>
				</div>
			</inputDiv>
			<br>
			<matDiv id="matDiv" class="matDiv">
				<table id="table0" class="mainTable dspNone" data-sel="0">
					<caption>Matrix-0
						<label class="tabbed dspNone">&#10004</label>
						<!-- &#10004: the "gou" -->
					</caption>
					<tbody id="t0_tbody"> </tbody>
				</table>
				<table id="table1" class="mainTable dspInlineblock" data-sel="0">
					<caption>M1/A
						<label class="tabbed dspNone">&#10004</label>
					</caption>
					<tbody id="t1_tbody"> </tbody>
				</table>
				<table id="table2" class="mainTable dspInlineblock" data-sel="0">
					<caption>M2/b/<b>V</b>
						<label class="tabbed dspNone">&#10004</label>
					</caption>
					<tbody id="t2_tbody"> </tbody>
				</table>
				<table id="table3" class="mainTable dspInlineblock dspNone" data-sel="0">
					<caption>M3
						<label class="tabbed dspNone">&#10004</label>
					</caption>
					<tbody id="t3_tbody"> </tbody>
				</table>
			</matDiv>
			<br>
			<div id="resultDiv">
			</div>
			<br>
			<div id="graphDiv" class="dspNone">
				<canvas id="canvas1" width=400 height=400></canvas>
				<button type="button" class="floatDel" onclick="this.parentNode.classList.add('dspNone')">hide</label>
			</div>
			<br>
		</main>
		<rightbar class="rightbar">
			<div class=" dspInlineblock margin0 width100">
				<div class="dashborder dragbox" id="dragDel"><i>drag here to delete</i></div>
				<div class="dashborder dragbox" id="dragCopy"><i>drag here to copy</i></div>
			</div>
			<div id="recordDiv" class="dspInlineblock">
				<div class="width100">
					<li>
						<ol>some history record</ol>
					</li>			
				</div>

			</div>
		</rightbar>
		<footer class="footer">
			<div class="tabbed dspInlineblock"></div>
			<input type="checkbox" name="selTable" id="selT1" value="1" checked onchange="updateSelection()" />
			<label for="selT1">M1</label>
			<input type="checkbox" name="selTable" id="selT2" value="2" checked onchange="updateSelection()" />
			<label for="selT2">M2</label>
			<input type="checkbox" name="selTable" id="selT3" value="3" onchange="updateSelection()" />
			<label for="selT3">M3</label>
			<p class="dspInlineblock tabbed font-12">precision:</p>
			<select class="dspInlineblock font-12" title="precision" id="selPre">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3" selected>3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="15">15</option>
			</select>
			<p class="dspInlineblock tabbed font-12">generate N=</p>
			<select class="dspInlineblock font-12" title="generateN" id="selGenN">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3" selected>3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="10">10</option>
				<option value="15">15</option>
				<option value="20">20</option>
			</select>
			<label class="tabbed font-12" for="cordMark">mark cordination</label>
			<input type="checkbox" name="cord" id="cordMark" checked onchange="drawCord=this.checked" />
			<label class="tabbed font-12" for="idFraction">fraction</label>
			<input type="checkbox" name="fraction" id="idFraction" onchange="inFraction=this.checked" />
			<label class="tabbed font-12" for="idRecordSteps">recordStep</label>
			<input type="checkbox" name="recordSteps" id="idRecordSteps" onchange="recordSteps=this.checked" />
		</footer>
	</div>
	<div id="signIUModal" class="signIU-modal">
		<div id="signIU-container" class="signIU-container">
			<div class="signIU-left" id="signIU-left">
				<div class="form-container dspNone" id="signUpForm">
					<form action="#">
						<h1>用户注册</h1>
						<div class="social-container">
							<a href="#" class="social"><i class="iconfont icon-qq"></i></a>
							<a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
							<a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
							<a href="#" class="social"><i class="iconfont icon-github"></i></a>
						</div>
						<input id="signUpUsername" type="text" placeholder="用户名" />
						<input id="signUpPassword" type="password" placeholder="密码" />
						<input id="signUpEmail" type="email" placeholder="邮箱" />
						<button type="button" id="send_code">发送验证码</button>
						<input type="email" placeholder="验证码" />
						<button id="signUpBtn" type="submit" onclick="signUp()">注册</button>
					</form>
				</div>
				<div class="form-container" id="loginForm">
					<form action="#">
						<h1>用户登录</h1>
						<div class="social-container">
							<a href="#" class="social"><i class="iconfont icon-qq"></i></a>
							<a href="#" class="social"><i class="iconfont icon-weixin"></i></a>
							<a href="#" class="social"><i class="iconfont icon-weibo-copy"></i></a>
							<a href="#" class="social"><i class="iconfont icon-github"></i></a>
						</div>
						<input id="loginUsername" type="text" placeholder="用户名" />
						<input id="loginPassword" type="password" placeholder="密码" />
						<button id="loginBtn" type="submit" onclick="login()">登录</button>
						<button id="setRoleBtn" type="button" onclick="setRole()">升级vip</button>
						<a href="#">忘记密码？</a>
					</form>
				</div>
			</div>
			<div class="signIU-right" id="signIU-right">
				<h1>没有帐号？</h1>
				<p>
					注册登录后可用：<br />
					题库直接点选 <br />3D显示矩阵变换效果<br />......
				</p>
				<button type="button" onclick="showSignUpForm()">注册</button>
			</div>
			<span class="gobackBtn dspNone" id="gobackBtn" onclick="showLoginForm()">←</span>
			<span class="closeBtn" onclick="hideSignIUModal()">×</span>
		</div>
	</div>
	<div>
		<math xmlns="http://www.w3.org/1998/Math/MathML">
			<semantics>
				<mrow>
					<mo stretchy="true" form="prefix">[</mo>
					<mtable>
						<mtr>
							<mtd>
								<mn>0</mn>
							</mtd>
							<mtd>
								<mn>1</mn>
							</mtd>
							<mtd>
								<mi>-</mi>
								<mn>4</mn>
							</mtd>
							<mtd>
								<mn>8</mn>
							</mtd>
						</mtr>
						<mtr>
							<mtd>
								<mn>2</mn>
							</mtd>
							<mtd>
								<mi>-</mi>
								<mn>3</mn>
							</mtd>
							<mtd>
								<mn>2</mn>
							</mtd>
							<mtd>
								<mn>1</mn>
							</mtd>
						</mtr>
						<mtr>
							<mtd>
								<mn>5</mn>
							</mtd>
							<mtd>
								<mi>-</mi>
								<mn>8</mn>
							</mtd>
							<mtd>
								<mn>7</mn>
							</mtd>
							<mtd>
								<mn>1</mn>
							</mtd>
						</mtr>
					</mtable>
					<mo stretchy="true" form="postfix">]</mo>
				</mrow>
			</semantics>
		</math>
		<math id="tmpl_mat" xmlns="http://www.w3.org/1998/Math/MathML" >
			<semantics>
				<mrow>
					<mo stretchy="true" form="prefix">[</mo>
					<mtable>
						<mtr id="tmpl_mat_row">
							<mtd>
								<mn>
									<input type="text" value="" class="cell">
									<input type="text" value="" class="cell">
									<input type="text" value="" class="cell">
								</mn>
							</mtd>
						</mtr>
						<mtr>
							<mtd>
								<mn>_<input type="text" value="" class="cell"></mn>
							</mtd>
						</mtr>
						<mtr>
							<mtd>
								<mn> <input type="text" value="" class="cell"></mn>
								
							</mtd>
						</mtr>
					</mtable>
					<mo stretchy="true" form="postfix">]</mo>
				</mrow>
			</semantics>
		</math>
	</div>

	<!-- <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.js"> </script> -->
	<!-- <script src="https://cdn.staticfile.net/mathjs/12.3.0/math.js"> </script>
	<script src="https://cdn.staticfile.net/mathjs/12.3.0/math.js.map"> </script> -->
	<script src="jquery.js"> </script>
	<script src="math.min.js"> </script>
	<script src="event_handle.js" defer></script>
	<script src="datastructure.js" defer> 	</script>
	<script src="la.js" defer> 	</script>
	<script src="login.js" defer> 	</script>
	<script src="canvas.js" defer> 	</script>
	<!-- <script src="./assets/mspace.js"> 	</script> -->
	<!-- <script defer src="katex.min.js"> 	</script> -->
	<!-- <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.js" integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous"></script> -->
	<!-- <script src="ocr.js"> 	</script>
	<script src="https://cdn.staticfile.net/tesseract.js/5.0.4/tesseract.min.js"></script>
	<script src="https://cdn.staticfile.net/tesseract.js/5.0.4/tesseract.min.js.map"></script>
	<script src="https://cdn.staticfile.net/tesseract.js/5.0.4/worker.min.js"></script>
	<script src="https://cdn.staticfile.net/tesseract.js/5.0.4/worker.min.js.map"></script> -->
	<!-- <script src="https://cdn.staticfile.net/spark-md5/3.0.2/spark-md5.min.js"></script> -->

	<!-- <script src="https://cdn.staticfile.net/clipboard.js/2.0.11/clipboard.min.js"></script> -->

</body>

</html>

<!-- <hr>
					<div id="divEditor" title="input data" class="div-editor" contenteditable="true" data-placeholder="data for matrix1"></div> -->

<!-- <span>
						<button type="button" class="normalButton" data-func="" onclick="echlon()">echlon</button>
						<input type="checkbox" name="toreduce" id="reduced" checked />
						<label for="reduced">reduced</label>
						<input type="checkbox" name="row interchange" id="rowinterchange" checked />
						<label for="rowinterchange">swap</label>
					</span> -->

<!-- </div> -->